<template>
  <div>
    <div class="ele-body" style="margin-bottom: -35px">
      <div class="padding-x-30 padding-top-30 bg-fff">
        <a-select
          v-model:value="type"
          style="width: 300px"
          :options="options"
          placeholder="按模板导入"
          allowClear
          @select="change"
        />
        <div class="tips margin-top-30"
          >请先导入会员（以线下会员的方式导入），再导入销售数据！请先整理好数据后再导入，请在基础资料中添加原系统使用的分类名称，保持数据一致</div
        >
      </div>
    </div>
    <zbTable ref="tableRef" :api-fun="get_order_import_list" @action="action" />

    <!-- 模板导入弹窗 -->
    <exportTemplate
      v-if="visible"
      v-model:visible="visible"
      :type="type"
      @daoru="daoru"
      @download="daochu"
    />
  </div>
</template>
<script setup>
  import { ref, reactive } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import { PlusOutlined, UploadOutlined } from '@ant-design/icons-vue';
  import { useRouter } from 'vue-router';
  import zbTable from './components/purchasePurchaseIndex.vue';
  import exportTemplate from './components/exportTemplate.vue';
  import {
    get_order_import_list,
    import_order,
    import_refund
  } from '@/api/order/order_import';

  // 是否显示编辑弹窗
  const tableRef = ref(null);
  const router = useRouter();
  const { push } = useRouter();
  const editData = ref({});
  const actionData = ref({});
  const options = ref([
    { label: '导入销售模板', value: '1' },
    { label: '导入退货模板', value: '2' }
  ]);
  const type = ref(null);
  const exportData = reactive({
    url: '',
    params: {}
  });
  const visible = ref(false);

  const change = (e) => {
    console.log(e);
    visible.value = true;
  };

  const action = (data) => {
    console.log('data', data);
    editData.value = data.row_data;
    actionData.value.url = data.action_data.url;
    if (data.action_data.type == 'detail') {
      push({
        path: '/order/order_import/detail',
        query: {
          id: data.row_data.id
        }
      });
    } else if (data.action_data.type == 'import_success') {
      exportData.url = data.action_data.url;
      exportData.params.id = data.row_data.id;
      daochuFn(exportData);
    } else if (data.action_data.type == 'import_fail') {
      exportData.url = data.action_data.url;
      exportData.params.id = data.row_data.id;
      daochuFn(exportData);
    }
  };
  const daochu = () => {
    let data = {
      url: '',
      params: {}
    };
    if (type.value == 1) {
      data.url = 'order/order_import/import_template_order';
    } else if (type.value == 2) {
      data.url = 'order/order_import/import_template_refund';
    }
    daochuFn(data);
  };
  const daoru = (data) => {
    if (type.value == 1) {
      import_order(data)
        .then((res) => {
          reloadTable();
          message.success(res.msg);
        })
        .catch((e) => {
          message.error(e);
        });
    } else if (type.value == 2) {
      import_refund(data)
        .then((res) => {
          reloadTable();
          message.success(res.msg);
        })
        .catch((e) => {
          message.error(e);
        });
    }
  };

  const done = (form) => {
    actionFn(actionData.value, form, reloadTable);
  };
  const reloadTable = () => {
    visible.value = false;
    tableRef.value.reload();
  };
</script>

<style lang="less" scoped>
  .tips {
    background-color: #f5f5f5;
    padding: 8px 10px;
  }
</style>
